<template>
	<view style="background-color: #fff;">
		<swiper  style="height: 100vh;">
			<!-- 一 -->
			<swiper-item>
				<view class="main">
					<view class="main_one">
						<view class="skip" @tap="goindex">
							跳过
						</view>
					</view>
					<view class="main_two">
						<image src="../../static/guidance/guidance1_3.png" mode="" style="width: 668rpx;height: 578rpx;"></image>
					</view>
				</view>
				<view class="footer">
					<view class="footer_icon">
						<image src="../../static/guidance/footer_icon3.png" mode=""></image>
					</view>
				</view>
				<view class="title">
					<view class="title_sty">
						<text style="font-size: 32rpx;">股市、基金</text>
						<text style="font-size: 44rpx;">随时看</text>
					</view>
					<view class="title_dian">
						<text class="dian_one"></text>
						<text class="dian_two" style="margin: 0 16rpx;"></text>
						<text class="dian_two"></text>
					</view>
				</view>
			</swiper-item>
			<!-- 二 -->
			<swiper-item>
				<view class="main">
					<view class="main_one">
						<view class="skip" @tap="goindex">
							跳过
						</view>
					</view>
					<view class="main_two">
						<image src="../../static/guidance/guidance2_3.png" mode="" style="width: 668rpx;height: 578rpx;"></image>
					</view>
				</view>
				<view class="footer">
					<view class="footer_icon">
						<image src="../../static/guidance/footer_icon3.png" mode=""></image>
					</view>
				</view>
				<view class="title">
					<view class="title_sty">
						<text style="font-size: 32rpx;">资金盈利</text>
						<text style="font-size: 44rpx;">秒到账</text>
					</view>
					<view class="title_dian">
						<text class="dian_two"></text>
						<text class="dian_one" style="margin: 0 16rpx;"></text>
						<text class="dian_two"></text>
					</view>
				</view>
			</swiper-item>
			<!-- 三 -->
			<swiper-item>
				<view class="main">
					<view class="main_one">
					</view>
					<view class="main_two">
						<image src="../../static/guidance/guidance3_3.png" mode="" style="width: 668rpx;height: 578rpx;"></image>
					</view>
					<view class="main_btn">
						<view class="btn_sty">
							<text @tap="goindex">开始体验</text>
						</view>
					</view>
				</view>
				<view class="footer">
					<view class="footer_icon">
						<image src="../../static/guidance/footer_icon3.png" mode=""></image>
					</view>
				</view>
				<view class="title">
					<view class="title_sty">
						<text style="font-size: 32rpx;">股市、基金</text>
						<text style="font-size: 44rpx;">随时看</text>
					</view>
					<view class="title_dian">
						<text class="dian_two"></text>
						<text class="dian_two" style="margin: 0 16rpx;"></text>
						<text class="dian_one"></text>
					</view>
				</view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				
			}
		},
		methods: {
			goindex(){
				console.log(1);
				uni.switchTab({
					url:'../index/index'
				})
			}
		}
	}
</script>

<style lang="scss">
	.main{
		position: relative;
		box-sizing: border-box;
		padding:100rpx 24rpx 0;
		.main_one{
			position: relative;
			.skip{
				position: absolute;
				right: 0;
				width: 120rpx;
				height: 48rpx;
				border-radius: 24rpx;
				box-shadow: 0 0 5rpx 1rpx #ccc;
				text-align: center;
				line-height: 48rpx;
				color: #333;
				font-size: 28rpx;
			}
		}
		
		.main_two{
			box-sizing: border-box;
			padding:150rpx 18rpx 0;
		}
		
		.main_btn{
			margin-top: 70rpx;
			width: 750rpx;
			
			.btn_sty{
				margin: 0 auto;
				color: #fff;
				background-color: $uni-bg-color-header;
				text-align: center;
				width: 250rpx;
				height: 100rpx;
				line-height: 100rpx;
				border-radius: 50rpx;
			}
			
		}
	}

	.footer{
		position: absolute;
		bottom: 0;
		image{
			width: 750rpx;
		}
	}
	.title{
		position: absolute;
		bottom: 50rpx;
		.title_sty{
			width: 750rpx;
			text-align: center;
			color: #fff;
		}
		.title_dian{
			margin-top: 100rpx;
			width: 750rpx;
			text-align: center;
			color: #fff;
			.dian_one{
				display: inline-block;
				width: 44rpx;
				height: 16rpx;
				background-color: #fff;
				border-radius: 16rpx;
			}
			.dian_two{
				display: inline-block;
				width: 16rpx;
				height: 16rpx;
				background-color: #fff;
				border-radius: 16rpx;
			}
		}
	}
</style>
